<template>
    <div class="container">

        <div v-if="!utils.getIsApp()" class="common-header-wrap">
            <mt-header title="选择日期与数量" class="common-header">
                <mt-button slot="left" icon="back" @click="$router.go(-1)"></mt-button>
            </mt-header>
        </div>

        <div class="star-address">
            <div style="font-weight: bold">出发地</div>
            <div style="color:#B5B5B5;font-size: .6rem" @click="tocity">{{city?city.name:'请选择出发城市'}} ></div>
        </div>
        <div class="star-address">
            <div style="font-weight: bold">选择旅行社</div>
            <div style="color:#B5B5B5;font-size: .6rem" @click="toagency">{{agency?agency.name:'请选择旅行社'}} ></div>
        </div>
        <div class="star-address">
            <div style="font-weight: bold">选择酒店</div>
            <div style="color:#B5B5B5;font-size: .6rem" @click="tohotel">{{hotel?hotel.name:'请选择酒店'}} ></div>
        </div>
        <div class="date-show">出发日期<span style="color:#3C7C45;font-size:.7rem;margin-left: 15px">{{starday?starday:'请选择出发日期'}}</span>
        </div>
        <div class="date-show" style="margin-top: 0;padding-top: 0">返程日期<span
                style="color:#3C7C45;font-size:.7rem;margin-left: 15px">{{endday?endday:'请选择返程日期'}}</span></div>

        <div class="calendar-wrapper">
            <div class="calendar-month"><i v-if="flag" class="iconfont" @click="goSearch(0)">&#xe64f;</i><span>{{date.year+'年'+date.month+'月'}}</span><i
                    v-if="!flag" class="iconfont" @click="goSearch(1)">&#xe650;</i></div>
            <div class="calendar-title">
                <div class="item"><span>日</span></div>
                <div class="item"><span>一</span></div>
                <div class="item"><span>二</span></div>
                <div class="item"><span>三</span></div>
                <div class="item"><span>四</span></div>
                <div class="item"><span>五</span></div>
                <div class="item"><span>六</span></div>
            </div>
            <div class="calendar-content">
                <div class="item item-title" v-for="(n,index) in week" :key="index"></div>
                <div class="item" v-for="(item,index) in daysArr" :key="'c'+index" :class="{active:item.active}"
                     @click="today>item.num?'':selectday(index)">
                    <div v-if="index===dayflag&&starday.split('-')[1]==date.month" class="pre-star">出发</div>
                    <div v-if="index===dayendflag&&endday.split('-')[1]==date.month" class="pre-star">返程</div>
                    <span class="pre-num" :class="{'disabled-active':today>item.num}">{{item.num}}</span>
                </div>
            </div>
        </div>

        <div class="submit-meal">
            <div class="submit-meal-title">选择景区<span>(可多选)</span></div>
            <div class="submit-meal-body">
                <div class="submit-meal-list" :class="{'active':item.active}" @click="searchspot(index)"
                     v-for="(item,index) in diyinfo.spot" :key="index">
                    {{item.name}}
                </div>
            </div>
        </div>

        <div class="submit-meal">
            <div class="submit-meal-title">选择驿站<span>(可多选)</span></div>
            <div class="submit-meal-body">
                <div class="submit-meal-list" :class="{'active':item.active}" @click="searchpost(index)"
                     v-for="(item,index) in diyinfo.post" :key="index">
                    {{item.name}}
                </div>
            </div>
        </div>

        <div class="submit-meal">
            <div class="submit-meal-title">出游人群</div>
            <div class="submit-meal-body">
                <div class="submit-people-list" :class="{'active':peopletype===1}" @click="searchpeople(1)">
                    单人
                </div>
                <div class="submit-people-list" :class="{'active':peopletype===2}" @click="searchpeople(2)">
                    团体
                </div>
            </div>
        </div>

        <div class="submit-meal">
            <div class="submit-meal-title">选择车辆<span>（非必选，如未填则由旅社自行分配）</span></div>
            <div class="submit-meal-body">
                <div class="submit-meal-list" :class="{'active':item.id==cart}" @click="searchcart(item.id)"
                     v-for="(item,index) in diyinfo.cart" :key="index">
                    {{item.name}}
                </div>
            </div>
        </div>

        <div class="submit-meal">
            <div class="submit-meal-title">选择餐食<span>（可多选，非必选，如未填则由旅社自行分配）</span></div>
            <div class="submit-meal-body">
                <div class="submit-meal-list" :class="{'active':item.active}" @click="searchfood(index)"
                     v-for="(item,index) in diyinfo.food" :key="index">
                    {{item.name}}
                </div>
            </div>
        </div>

        <div class="submit-meal">
            <div class="submit-meal-title">联系人信息</div>
            <div class="submit-information-list">
                <div class="information-title">姓名</div>
                <input id="lastName" class="information-input" v-model="username" placeholder="请填写联系人姓名">
            </div>
            <div class="submit-information-list">
                <div class="information-title">手机</div>
                <input class="information-input" type="number" v-model="usermobile" value="" placeholder="请填写联系人手机号码">
            </div>
        </div>
        <div class="submit-meal">
            <div class="submit-meal-title">备注</div>
            <textarea class="submit-remarks" v-model="remarks" placeholder="1、若选择“团体”出游请在此填写人数，如：成人4人,儿童2人
2、在此描述您的旅行需求，如需发票请备注。"></textarea>
        </div>
        <div style="width: 100vw;height: 40px"></div>
        <div class="teatravel-foot" @click="getTravelbuystep1">{{edit?'修改行程':'提交行程'}}</div>
    </div>
</template>

<script>
    import {getTravelcasecustom, getTravelbuystep1, getTravelorderdetail,getTravelupdateorder} from '../../../api/travel'
    import {mapState, mapMutations, mapActions} from 'vuex'
    import {Toast, Indicator} from 'mint-ui'
    import Teatravel from "../teatravel/Teatravel";
    import Storagedetail from "../storagedetail/Storagedetail";

    export default {
        name: 'Teatravelsubmit2',
        components: {Storagedetail, Teatravel},
        data() {
            return {
                day_list: false,
                if_signin: false,
                monthDay: [31, 0, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], // 每月天数
                week: '', // 空白格子数
                date: {
                    year: '',
                    month: ''
                }, //当前选择年月
                daysArr: [], // 本月日期数组
                dayflag: '', // 出发时间的索引
                dayendflag: '', // 返程时间的索引
                starday: '', //选中出发时间
                endday: '', //选中结束时间
                flag: false, //月份切换标记，false:仅可点击下个月 true：仅可点击上个月
                peopletype: '', // 当前出游人群类型 1:单人 2：团体
                username: '', //姓名
                usermobile: '', //电话
                remarks: '', //备注
                diyinfo: {}, //自定义信息
                spotarr: [], //当前选中景区
                postarr: [], //当前选中驿站
                foodarr: [], //当前选中餐食
                cart: '', // 当前选中车辆类型
                today: '', //本月：今日几号，下个月：值为-1
                edit: false, //是否修改
                // info:'', // 修改时的详情数据
            }
        },
        created() {
        },
        computed: {
            ...mapState({
                user: state => state.member.info,
                config: state => state.config.config,
                city: state => state.travel.city,
                agency: state => state.travel.agency,
                hotel: state => state.travel.hotel,
            })
        },
        mounted() {
            this.getinittime();
            this.getTravelcasecustom();
        },
        methods: {
            ...mapMutations({
                savebuy: 'savebuy',
                savebuyshow: 'savebuyshow',
                savecity: 'savecity',
                saveagency: 'saveagency',
                savehotel: 'savehotel'
            }),

            //获取详情
            getTravelorderdetail() {
                this.edit = true;
                getTravelorderdetail(this.$route.query.edit_id).then(res => {
                    let result = res.result.shot_lists;
                    // this.savecity(result.city);
                    // this.saveagency(result.user);
                    // this.savehotel(result.hotel);
                    this.foodarr = result.food;
                    for (let i = 0; i < result.food.length; i++) {
                        for (let j = 0; j < this.diyinfo.food.length; j++) {
                            if (this.diyinfo.food[j].name == result.food[i]) {
                                this.diyinfo.food[j].active = true
                            }
                        }
                    }
                    this.cart = result.cart.id;
                    let spot = []
                    for (let i = 0; i < result.spot.length; i++) {
                        spot.push(result.spot[i].id)
                        for (let j = 0; j < this.diyinfo.spot.length; j++) {
                            if (this.diyinfo.spot[j].id == result.spot[i].id) {
                                this.diyinfo.spot[j].active = true;
                            }
                        }
                    }
                    this.spotarr = spot;
                    let post = []
                    for (let i = 0; i < result.post.length; i++) {
                        post.push(result.post[i].id);
                        for (let j = 0; j < this.diyinfo.post.length; j++) {
                            if (this.diyinfo.post[j].id == result.post[i].id) {
                                this.diyinfo.post[j].active = true;
                            }
                        }
                    }
                    this.postarr = post;
                    this.peopletype = result.people;
                    this.username = result.name;
                    this.usermobile = result.mobile;
                    this.remarks = result.remark;
                }).catch(function (error) {
                    Toast(error.message)
                })
            },
            //修改订单
             getTravelupdateorder(result){
                 getTravelupdateorder(this.$route.query.edit_id,result).then(res=>{
                    Toast('修改成功');
                    setTimeout(()=>{
                        this.$router.push({name:'HomeTeaorderlist'})
                    },1500)
                 }).catch(function (error) {
                     Toast(error.message)
                 })
             },
            //提交行程
            getTravelbuystep1() {
                if (this.username == '' || this.usermobile == '') {
                    Toast('姓名和联系方式不能为空!');
                    return;
                }
                if(this.starday==''||this.endday==''){
                    Toast('请先选择日期!');
                    return;
                }

                let result = {
                    type: 2,
                    start: this.starday + ' 00:00:00',
                    end: this.endday + ' 00:00:00',
                    city_id: this.city.id,
                    spot: this.spotarr.toString(),
                    post: this.postarr.toString(),
                    people: this.peopletype,
                    travel: this.agency.id,
                    hotel: this.hotel.id,
                    cart: this.cart,
                    food: this.foodarr.toString(),
                    name: this.username,
                    mobile: this.usermobile,
                    remark: this.remarks
                };
                this.savebuy(result);
                if(this.edit){
                    this.getTravelupdateorder(result);
                    return;
                }
                getTravelbuystep1(result).then(res => {
                    this.savebuyshow(res.result)
                    this.$router.push({name: 'HomeTeatravelmade', query: {type: 2}})
                }).catch(function (error) {
                    Toast(error.message)
                })
            },
            //获取自定义套餐数据
            getTravelcasecustom() {
                getTravelcasecustom().then(res => {
                    let data = res.result;
                    for (let i = 0; i < data.spot.length; i++) {
                        this.$set(data.spot[i], 'active', false)
                    }
                    for (let j = 0; j < data.post.length; j++) {
                        this.$set(data.post[j], 'active', false)
                    }
                    for (let j = 0; j < data.food.length; j++) {
                        this.$set(data.food[j], 'active', false)
                    }
                    this.diyinfo = data;
                    this.$forceUpdate();
                    if (this.$route.query.edit_id) {
                        this.getTravelorderdetail();
                    }
                }).catch(function (error) {
                    Toast(error.message)
                })
            },
            //选择车辆
            searchcart(id) {
                this.cart = id
            },
            //选择餐食
            searchfood(index) {
                if (this.diyinfo.food[index].active) {
                    this.diyinfo.food[index].active = false;
                    for (let i = 0; i < this.foodarr.length; i++) {
                        if (this.foodarr[i] == this.diyinfo.food[index].name) {
                            this.foodarr.splice(i, 1);
                            return
                        }
                    }
                } else {
                    this.diyinfo.food[index].active = true;
                    this.foodarr.push(this.diyinfo.food[index].name)
                }
            },
            //选择景区
            searchspot(index) {
                if (this.diyinfo.spot[index].active) {
                    this.diyinfo.spot[index].active = false;
                    for (let i = 0; i < this.spotarr.length; i++) {
                        if (this.spotarr[i] == this.diyinfo.spot[index].id) {
                            this.spotarr.splice(i, 1);
                            return
                        }
                    }
                } else {
                    this.diyinfo.spot[index].active = true;
                    this.spotarr.push(this.diyinfo.spot[index].id)
                }
            },
            //选择驿站
            searchpost(index) {
                if (this.diyinfo.post[index].active) {
                    this.diyinfo.post[index].active = false;
                    for (let i = 0; i < this.postarr.length; i++) {
                        if (this.postarr[i] == this.diyinfo.post[index].id) {
                            this.postarr.splice(i, 1);
                            return
                        }
                    }
                } else {
                    this.diyinfo.post[index].active = true;
                    this.postarr.push(this.diyinfo.post[index].id)
                }
            },
            //选择出游人群
            searchpeople(type) {
                this.peopletype = type;
            },
            // 切换日期
            goSearch() {
                // this.starday = '';
                // this.endday ='';
                // this.dayflag='';
                // this.dayendflag='';
                let month = new Date().getMonth() + 1;
                let nmonth = this.date.month;
                if (this.flag) { // 前一个月
                    this.getinittime(month)
                    this.today = new Date().getDate();
                } else { // 后一个月
                    this.getinittime(nmonth + 1)
                    this.today = -1
                }
                this.flag = !this.flag

                if (this.dayendflag) {
                    if (this.starday.split('-')[1] == this.endday.split('-')[1]) {
                        if (this.date.month == this.starday.split('-')[1]) {
                            for (let i = this.dayflag; i <= this.dayendflag; i++) {
                                this.daysArr[i].active = true;
                            }
                        }
                    } else {
                        if (this.starday.split('-')[1] == this.date.month) {
                            for (let i = this.dayflag; i < this.daysArr.length; i++) {
                                this.daysArr[i].active = true;
                            }
                        } else {
                            for (let i = 0; i <= this.dayendflag; i++) {
                                this.daysArr[i].active = true;
                            }
                        }
                    }
                } else if (this.dayflag && this.starday.split('-')[1] == this.date.month) {
                    this.daysArr[this.dayflag].active = true;
                }


            },
            // 初始化时间
            getinittime(mon) {
                let time = new Date();
                let day = time.getDate();
                this.today = day;
                let month = '';
                if (mon) {
                    month = mon
                } else {
                    month = time.getMonth() + 1;
                }
                let year = time.getFullYear();
                let week = new Date(`${year}/${month}/1`).getDay();
                let days = this.whatMonth(year, month);
                let daysArr = [];
                for (let i = 0; i < days; i++) {
                    daysArr.push({num: i + 1, active: false})
                }
                this.date.year = year;
                this.date.month = month;
                this.week = week;
                this.daysArr = daysArr;
            },
            //返回月份天数
            whatMonth(year, month) {
                if (month == 2) {
                    if (this.isLeap(year)) {
                        return 29
                    } else {
                        return 28
                    }
                } else {
                    return this.monthDay[month * 1 - 1]
                }
            },
            //判断是否闰年
            isLeap(year) {
                if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
                    return true;
                } else {
                    return false;
                }
            },
            // 选择时间
            selectday(index) {
                if (this.starday && this.starday.split('-')[1] == this.date.month) {
                    if (this.dayflag !== '' && this.dayflag < index) {
                        for (let i = 0; i < this.daysArr.length; i++) {
                            this.daysArr[i].active = false;
                        }
                        for (let i = this.dayflag; i <= index; i++) {
                            this.daysArr[i].active = true;
                        }
                        this.endday = `${this.date.year}-${this.date.month}-${this.daysArr[index].num}`
                        this.dayendflag = index;
                    } else if (this.dayflag !== '' && this.dayflag == index) {
                        for (let i = 0; i < this.daysArr.length; i++) {
                            this.daysArr[i].active = false;
                        }
                        this.dayflag = '';
                        this.dayendflag = '';
                        this.starday = '';
                        this.endday = '';
                    }
                } else if (this.starday) {
                    if (this.starday.split('-')[1] < this.date.month) {
                        for (let i = 0; i < this.daysArr.length; i++) {
                            this.daysArr[i].active = false;
                        }
                        for (let i = 0; i <= index; i++) {
                            this.daysArr[i].active = true;
                        }
                        this.endday = `${this.date.year}-${this.date.month}-${this.daysArr[index].num}`
                        this.dayendflag = index;
                    }
                } else if (this.dayflag === '') {
                    this.daysArr[index].active = true;
                    this.starday = `${this.date.year}-${this.date.month}-${this.daysArr[index].num}`
                    this.dayflag = index;
                }
            },
            //前往选择城市
            tocity() {
                this.$router.push({name: 'HomeTeatravelcity'})
            },
            //前往选择旅行社
            toagency() {
                this.$router.push({name: 'HomeTeatravelagency'})
            },
            //前往选择酒店
            tohotel() {
                this.$router.push({name: 'HomeTeatravelhotel'})
            },
        }
    }
</script>

<style scoped lang="scss">
    .disabled-active {
        color: #B5B5B5;
    }

    .submit-meal {
        margin-top: 10px;
        background: white;
        padding: 10px 25px;

        .submit-meal-title {
            font-size: .7rem;
            font-weight: bold;

            span {
                color: #B5B5B5;
                font-size: .5rem;
                margin-left: 5px;
            }
        }

        .submit-meal-body {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            .submit-meal-list {
                margin-top: 10px;
                margin-right: 15px;
                width: 140px;
                text-align: center;
                padding: 4px 0;
                font-size: .6rem;
                background: #EEEFF2;
                border-radius: 100px;
            }

            .submit-people-list {
                margin-top: 10px;
                margin-right: 15px;
                width: 80px;
                text-align: center;
                padding: 4px 0;
                font-size: .6rem;
                background: #EEEFF2;
                border-radius: 100px;
            }

            .active {
                background: $primaryColor;
                color: white;
            }
        }

        .submit-information-list {
            margin-top: 10px;
            display: flex;
            flex-direction: row;
            align-items: center;

            .information-title {
                font-size: .6rem;
                margin-right: 20px;
            }

            .information-input {
                border: none;
            }
        }

        .submit-remarks {
            width: 100%;
            height: 80px;
        }
    }

    .date-show {
        margin-top: 10px;
        font-size: .7rem;
        font-weight: bold;
        background: white;
        padding: 20px 25px 5px 25px;
    }

    .star-address {
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px 25px;
        font-size: .7rem;
        background: white;
        align-items: center;
    }

    .point-signin-header {
        margin-bottom: 1rem;
        background: $primaryColor;
        padding: .5rem;
        text-align: center;

        .btn-wrapper {
            height: 4rem;
            width: 4rem;
            margin: 1rem auto;
            border-radius: 50%;
            background: $primaryColor;
            border: .3rem solid rgba(255, 255, 255, .5);
            overflow: hidden;

            &.active {
                .btn {
                    > div {
                        background: $primaryColor;
                        color: rgba(255, 255, 255, .8);
                        line-height: 3.4rem;
                    }
                }
            }

            .btn {
                background: #fff;
                width: 100%;
                height: 100%;
                padding: .3rem;
                box-sizing: border-box;

                > div {
                    border-radius: 50%;
                    width: 100%;
                    height: 100%;
                    margin: 0 auto;
                    border: 1px solid $primaryColor;
                    box-sizing: border-box;

                    .title {
                        font-size: .8rem;
                        color: $primaryColor;
                        margin-top: .7rem;
                    }

                    .content {
                        font-size: .6rem;
                        color: $primaryColor
                    }
                }
            }
        }

        .notice {
            font-size: .6rem;
            color: #fff;
            opacity: .8
        }
    }

    .calendar-wrapper {
        background: #fff;

        .calendar-month {
            text-align: center;
            font-size: .6rem;
            line-height: 2rem;
            border-bottom: 1px solid #eee;
            margin-bottom: .5rem;

            > span {
                margin: 0 1rem;
            }

            i {
                font-size: .6rem;
            }
        }

        .calendar-title {
            .item {
                height: 1.5rem;
                line-height: 1.5rem;
            }
        }

        .item {
            position: relative;
            float: left;
            width: 14.28%;
            height: 3rem;
            text-align: center;
            font-size: .7rem;
            line-height: 3.8rem;

            .pre-num {
                height: 1rem;
                width: 1rem;
                line-height: 1rem;
                border-radius: 50%;
                display: inline-block;
                margin: 0 auto;
            }

            .pre-star {
                position: absolute;
                line-height: normal;
                width: 100%;
                top: .7rem;
                font-size: .5rem;
            }

            &.active {
                background: $primaryColor;
                color: #fff
            }
        }

        .calendar-content, .calendar-title {
            overflow: hidden;
            padding: 0 .5rem;
        }

    }

    .teatravel-foot {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        font-size: .9rem;
        font-weight: bold;
        color: white;
        background: $primaryColor;
        text-align: center;
        line-height: 40px;
    }
</style>
